<template>
  <div>
    <ul>
        <li><a href="javascript:;" @click="contact('/allcontacts','allcontacts')">All_contacts</a></li>
        <li><a href="javascript:;" @click="contact('/alice','alice')">Alice</a></li>
        <li><a href="javascript:;" @click="contact('/bob','bob')">Bob</a></li>
    </ul>

        <Button type="info" @click="random">随机显示</Button>
        <br>
        <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'contacts',
    data(){
        return {
            arr:['allcontacts','alice','bob']
        }
    },
    methods:{
random(){
    let index=parseInt(Math.random()*3)
    // 获取当前页面路径
    let curPath=this.$route.fullPath
    // 判断当前路由是否就是要跳转的路由
    let path=`\/${this.arr[index]}`
    if(curPath.includes(path)) return
        this.$router.push({
        name:this.arr[index]
    })
        },
 contact(path,name){
    // 获取当前页面路径
    let curPath=this.$route.fullPath
    // 判断当前路由是否就是要跳转的路由
     if(curPath.includes(path)) return
        this.$router.push({
            name:name
            })
        }
    }
}
</script>
<style lang="less" scoped>
       a{
        font-size: 16px;
        margin-right: 15px;
        text-decoration: underline;
        color: blueviolet;
    }
     a:hover{
         color: red;
    }
</style>